<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>缴费信息列表</title>

    <style>
        .x-nav{padding:0 20px;position:relative;z-index:99;border-bottom:1px solid #e5e5e5;line-height:39px;height:39px;overflow:hidden}

        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
<!--    解决layui复选框不居中显示的bug-->
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>

<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>服务管理</cite></a>
              <a><cite>活动管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

    <div class="layui-inline">
        <label class="layui-form-label">活动标题</label>
        <div class="layui-input-inline">
            <input type="text" name="liketitle" id="liketitle" autocomplete="off" placeholder="请输入" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" id="searchBtn" lay-submit
                    lay-filter="formDemo" data-type="reload" style="margin-left: 15px">
                <i class="layui-icon layui-icon-search"></i> 查询
            </button>
            <button class="layui-btn" id="reset">重置</button>
        </div>
    </div>


<div class="layui-col-xs12">
    <button type="button" class="layui-btn" id="addBtn">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <table id="activityTable" lay-filter="activityTable" ></table>
</div>


    <!--添加-->
    <form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">活动标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">活动内容</label>
                    <div class="layui-input-block">
                        <textarea name="content" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">活动地点</label>
                    <div class="layui-input-block">
                        <input type="text" name="place" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">举办单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="hostUnits" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="beginTime" class="layui-input" id="addDateBeginTime" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" class="layui-input" id="addDateEndTime" autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="createTime" class="layui-input" id="addDateCreateTime" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addActivity">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>

<!--修改-->
<form id="updateForm" lay-filter="updateForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="id" id="id" >

    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="layui-form-item">
                <label class="layui-form-label">活动标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">活动内容</label>
                <div class="layui-input-block">
                    <textarea name="content" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">活动地点</label>
                <div class="layui-input-block">
                    <input type="text" name="place" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">举办单位</label>
                <div class="layui-input-block">
                    <input type="text" name="hostUnits" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="beginTime" class="layui-input" id="updateDateBeginTime" autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="endTime" class="layui-input" id="updateDateEndTime" autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-block">
                    <input type="text" name="createTime" class="layui-input" id="updateDateCreateTime" autocomplete="off">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateActivity">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>

    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<script type="text/javascript">
    $(window).on('load',function() {
        let item = localStorage.getItem("code");
        if (item != 0) {
            window.location.href = "/login.jsp"
        }
    });

    layui.use(['element'], function(){
        var element=layui.element;
        element.init();
    });


    // var nowtime = new Date();
    // let yyyy = new Date().getFullYear();
    // let mm = new Date().getMonth() + 1;
    // let dd = new Date().getDate();
    // let hh = new Date().getHours();
    // let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
    //     :
    //     new Date().getMinutes();
    // let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
    //     :
    //     new Date().getSeconds();
    // nowtime = yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;

    layui.use(["table","form","upload","layer","tree","laydate"],function() {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var tree = layui.tree;
        var laydate=layui.laydate;

        //渲染table表格=====开始
        table.render({
            elem: '#activityTable'
            ,page: true
            ,limit:5
            ,limits:[5,8,12]
            ,url: 'http://localhost:8888/hy-activity/showAllActivity' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: '编号' }
                ,{field: 'title', title: '活动标题'}
                ,{field: 'content', title: '活动内容'}
                ,{field: 'place', title: '活动地点'}
                ,{field: 'hostUnits', title: '举办单位'}
                ,{field: 'beginTime',width:180, title: '开始时间'}
                ,{field: 'endTime', width:180,title: '结束时间'}
                ,{field: 'createTime', width:180,title: '创建时间'}
                ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
            ]]
        });

        var nowtime='';

        // 给添加按钮增加弹出层---开始
        $("#addBtn").click(function(){
            $.ajax({
                url: "http://localhost:8888/hy-activity/getNowTime",
                dataType: "json",
                success: function (data) {
                    if(data.code==0){
                        $("#addDateCreateTime").val(data.nowtime);
                        nowtime=data.nowtime;
                    }
                }
            });
            layer.open({
                type:1,
                offset: 't',
                area: ['700px','400px'],
                title:"添加新活动",
                content:$("#addForm")
            });
            $("#addDateCreateTime").val(nowtime);
        });
        //给添加按钮增加弹出层---结束

        //给添加表单增加监听事件---开始
        form.on("submit(addActivity)", function(data){
            let beginTime = $("#addDateBeginTime").val();
            let endtime = $("#addDateEndTime").val();
            let now= nowtime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            let start = beginTime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            let end = endtime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            if(start>=now){
                if(end>=start){
                    //发出ajax请求，往数据库里面存储数据---开始
                    $.ajax({
                        url:"http://localhost:8888/hy-activity/addActivity",
                        data:data.field,
                        dataType:"json",
                        type:"post",
                        success:function(res){
                            if(res.code==0){
                                //关闭弹出层
                                layer.closeAll();
                                layer.msg("添加成功！");
                                //刷新table表格
                                table.reload("activityTable");
                                $("#addForm").css("display","none");

                            }
                        }
                    });
                }else{
                    layer.msg("结束时间不能小于开始时间！！！");
                }
            }else{
                layer.msg("开始时间不能小于当前时间！！！");
            }

            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给添加表单增加监听事件---结束

        /*监听table表格上面的操作按钮====开始*/

        table.on("tool(activityTable)",function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === 'del'){
                //调用confirm方法
                layer.confirm('是否确认删除？',function (ss) {
                    //发出ajax请求
                    $.ajax({
                        url: "http://localhost:8888/hy-activity/deleteActivity",
                        data: "id="+data.id,
                        dataType: "json",
                        success: function (uyg) {
                            //提示删除成功，刷新table表格
                            layer.msg("删除成功");
                            table.reload("activityTable");
                        }
                    });
                    layer.close(ss);
                });
            }else if(layEvent === 'edit') {
                //1.根据data获取到数据
                //2.把数据回显到修改的form表单中
                form.val("updateForm",data);
                $.ajax({
                    url: "http://localhost:8888/hy-activity/getNowTime",
                    dataType: "json",
                    success: function (data) {
                        if(data.code==0){
                            $("#updateDateCreateTime").val(data.nowtime);
                            nowtime=data.nowtime;
                        }
                    }
                });
                //把from表单放入弹出层中显示出来
                layer.open({
                    type:1,
                    offset: 't',
                    area: ['700px','400px'],
                    title:"修改活动信息",
                    content:$("#updateForm")
                });
            }
        })

        /*监听table表格上面的操作按钮====结束*/

        //监听修改form的提交按钮===开始
        form.on('submit(updateActivity)', function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            console.log(data);
            let beginTime = $("#updateDateBeginTime").val();
            let endtime = $("#updateDateEndTime").val();
            let now= nowtime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            let start = beginTime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            let end = endtime.replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ").replace("-", ":"," ");
            if(start>=now){
                if(end>=start){
                    //发出ajax请求，往数据库里面存储数据---开始
                    $.ajax({
                        url:"http://localhost:8888/hy-activity/updateActivity",
                        data:data.field,
                        dataType:"json",
                        type:"post",
                        success:function(res){
                            if(res.code==0){
                                //关闭弹出层
                                layer.closeAll();
                                layer.msg("修改成功！");
                                //刷新table表格
                                table.reload("activityTable");
                                $("#updateForm").css("display","none");
                            }
                        }
                    });
                }else{
                    layer.msg("结束时间不能小于开始时间！！！");
                }
            }else{
                layer.msg("开始时间不能小于当前时间！！！");
            }


            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //监听修改学生的提交按钮===结束

        //日期时间选择器
        laydate.render({
            elem: '#addDateBeginTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#addDateEndTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#addDateCreateTime'
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#updateDateBeginTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#updateDateEndTime'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#updateDateCreateTime'
            ,type: 'datetime'
        });

    })


    $('#searchBtn').on('click', function () {
        layui.use("table",function() {
            let table = layui.table;
            table.render({
                elem: '#activityTable'
                ,page: true
                ,limit:5
                ,limits:[5,8,12]
                ,where: {
                    liketitle:$('#liketitle').val()
                }
                ,url: 'http://localhost:8888/hy-activity/showAllActivity' //数据接口
                ,cols: [[ //表头
                    {field: 'id', title: '编号' }
                    ,{field: 'title', title: '活动标题'}
                    ,{field: 'content', title: '活动内容'}
                    ,{field: 'place', title: '活动地点'}
                    ,{field: 'hostUnits', title: '举办单位'}
                    ,{field: 'beginTime', title: '开始时间'}
                    ,{field: 'endTime', title: '结束时间'}
                    ,{field: 'createTime', title: '创建时间'}
                    ,{title:"操作", width:300, align:'center', toolbar: '#barDemo'}
                ]]
            });
        });
    });
    $("#reset").click(function(){
        $("input[type='text']").prop("value","");
    });


</script>

<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn  layui-btn-sm"><i class="layui-icon" lay-event="edit"></i></button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon" lay-event="del"></i></button>
</script>
</body>
</html>
